<template>
    <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">

    <div class="item-container">
        <div class="header">
            <text class="text">空气源热泵能效监测能耗与气温关系统计表</text>
        </div>
        <div class="cont">
            <ul class="list" v-if="show">
                <li class="listItem">
                    <text class="bold">提示分析</text>
                </li>
                <li class="listItem">
                   <text class="bold">总结：</text>
                </li>
                <li class="listItem">
                   <text class="bold">气温越低，日均耗电量越高.</text>
                </li>
                <li class="listItem">
                    <text class="title">室外平均温度最低{{dataItem.wd_min}}℃，日均户耗电量是{{dataItem.hdl_min}}，系统COP是{{dataItem.cop_min}}</text>
                </li>
                <li class="listItem">
                    <text class="title">室外平均温度最高{{dataItem.wd_max}}℃，日均耗电量是{{dataItem.hdl_max}},系统COP是{{dataItem.cop_max}}</text>
                </li>
                <li class="listItem">
                    <text class="title">最低温比最高温，耗电量{{addData}}{{dataItem.hdl_in}}%，系统COP{{removeData}}{{dataItem.cop_in}}%.</text>
                </li>
            </ul>
            <ul class="list" v-if="contNull">
                <li class="listItem">
                    <text class="title">没有符合条件的设备!</text>
                </li>
            </ul>
        </div>
    </div>

    <div class="item-container">
        <grid :head="gridHead" :grid="gridData"/>
    </div>

    <div class="item-container">
        <bmchart :options="$format(chart)" style="flex:1;"></bmchart>
    </div>

  </wxc-tab-bar>
</template>
<script>
import wxcTabBar from '@/components/tabBar.vue'
import event from '@/net/event'
import grid from '@/components/scrollGrid'
export default {
    name: 'airDetail',
    data () {
        return {
            tabTitles: [{title: '汇总分析'}, {title: '统计报表'}, {title: '曲线图'}],
            tabStyles: {
                bgColor: '#fff',
                titleColor: 'rgba(204,204,204,1)',
                activeTitleColor: '#fff',
                activeBgColor: 'rgba(62,175,252,1)',
                width: 250,
                height: 59,
                fontSize: 30
            },
            dataItem: {},
            addData: '',
            gridHead: [
                { name: 'cjsj', value: '监测日期'},
                { name: 'tqyb', value: '天气预报最低温度(℃)'},
                { name: 'swwd', value: '室外平均温度(℃)'},
                { name: 'hdl', value: '日均户耗电量(kwh)'},
                { name: 'cop', value: '系统COP'}
            ],
            gridData: [],
            show: null,
            contNull: null,
            chart: {}
        }
    },
    components: {
        wxcTabBar,
        grid
    },
    beforeCreate() {
        this.$notice.loading.show()
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created(){
        this.getData()
    },
    methods: {
        getData () {
            this.$router.getParams().then(resData => {
                if(resData.quyxzqhdm == '' && resData.T0GSDM == '') {
                    this.$notice.loading.hide()
                    this.show = false
                    this.contNull = true
                } else {
                    this.show = true
                    this.contNull = false
                    event.getTJ34(resData.quyxzqhdm, resData.T0JHSJMIN, resData.T0JHSJMAX, resData.T0GSDM).then(res => {
                        this.$notice.loading.hide()
                        this.dataItem = res.result.dataitem
                        this.gridData = res.result.datalist.splice(1, res.result.datalist.length-1)
                        this.loadData()
                        if(this.dataItem.h_up == 1) {
                            this.addData = '增加'
                        } else {
                            this.addData = '减少'
                        }
                        if(this.dataItem.c_up == 1){
                            this.removeData = '升高'
                        } else {
                            this.removeData = '降低'
                        }
                    })
                }
            })
        },
        loadData () {
            const data = this.gridData
            let time = []
            let tqyb = []
            let swwd = []
            let hdl = []
            let outdoor = []
            let cop = []
            data.forEach(value => {
                time.push(value.cjsj) // 检测时间
                tqyb.push(value.tqyb) // 天气预报最低温度(℃)
                swwd.push(value.swwd) // 室外平均温度(℃)
                hdl.push(value.hdl) // 日均户耗电量(kwh)
                cop.push(value.cop) // 系统COP
            })
            this.chart = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['天气预报最低温度(℃)', '室外平均温度(℃)', '日均户耗电量(kwh)', '系统COP']
                },
                grid: {
                    left: '8.5%',
                    right: '8.5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: time
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '天气预报最低温度(℃)',
                        type: 'line',
                        data: tqyb,
                        smooth: true
                    },
                    {
                        name: '室外平均温度(℃)',
                        type: 'line',
                        data: swwd,
                        smooth: true
                    },
                    {
                        name: '日均户耗电量(kwh)',
                        type: 'line',
                        data: hdl,
                        smooth: true
                    },
                    {
                        name: '系统COP',
                        type: 'line',
                        data: cop,
                        smooth: true
                    }
                ]
            }
        }
    }
}
</script>
<style scoped>
.item-container {
    width: 750px;
    flex: 1;
}
.header{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.cont{
    width: 750px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}
.list{
    width: 700px;
    border-radius: 20px;
    background-color: #fff;
}
.listItem{
    width: 700px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
}
.redColor{
    color: red;
}
.title{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(0,0,0,1);
}
.bold{
    font-size: 28px;
    font-family:PingFangSC-Regular;
    color:rgba(0,0,0,1);
}
</style>

